<template>
    <div>
      <el-form ref="form" :model="user" :rules="rules" label-width="80px">
        <el-form-item label="序号">
          <el-input v-model="user.u_id"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="u_name">
          <el-input v-model="user.u_name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="u_age">
          <el-input v-model="user.u_age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="u_sex">
          <el-input v-model="user.u_sex"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="u_phone">
          <el-input v-model="user.u_phone"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="u_address">
          <el-input v-model="user.u_address"></el-input>
        </el-form-item>
        <el-form-item label="照片">
          <img :src="user.u_photopath" width="50px">
          <el-upload ref="upload" name="photo" action="" :auto-upload="false"
                     accept=".png,.jpg,.gif" :on-change="handleChange"
                     :file-list="fileList" :http-request="httpRequest"
          >
            <el-button type="primary" size="small">点击上传</el-button>
            <span slot="tip">.png,.jpg,.gif</span>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
    export default {
        name: "UserUpdate",
      data(){
          return{
            user:{},
            fileList:[],
            file:[],
            rules:{

            },
          }
      },
      methods:{
        onSubmit(){
          this.$refs.form.validate(valid=>{
              if (valid){
                var formData = new FormData();
                this.$refs.upload.submit();
                this.file.forEach(function(file){
                  console.log(file);
                  formData.append('photo',file,file.name);
                });
                Object.keys(this.user).forEach(key=>{
                  formData.append(key,this.user[key])
                });
                this.$axios.post('UserServlet/userUpdate',formData)
                  .then(resp=>{
                    this.$router.push('/userUpdate')
                  })
              }
          })
        },
        handleChange(file){
          this.fileList.splice(0,this.fileList.length)
          this.user.u_photopath=URL.createObjectURL(file.raw)
          this.fileList[0]=file;
        },
        httpRequest(param){
          this.file.push(param.file)
        },
      },
      created() {
          this.user = this.$store.state.user
      }
    }
</script>

<style scoped>

</style>
